{% extends "base.html" %}
{% load ccfilters %}
{% load cctags %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/styles/allroutes.css"/>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="/localjs/jquery.magicmap2.js"></script>
<script type="text/javascript" src="/static/js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("img.preview_img").preview();

    var jqwindow = $(window);
    var lazyloading = $("#lazy_loading");
    var routes_loading = $("#routes_loading");

    lazyloading.css('visibility', 'hidden');

    var buildRoutes = function(routes){
        var routes_container = $("#routes_container");
        var route_rows = $(".route_row");
        var total_rows = route_rows.length;
        for(var i=0; i<routes.length; i++){
            var route = routes[i];
            var row = $(route_rows[Math.abs(total_rows-2-i)%total_rows]).clone();

            $(".preview_map a", row).attr("href", "/routes/"+route.id);
            $(".preview_map a img", row).attr("src", route.preview_url);
            $(".preview_map a img", row).attr("title", route.name);

            $(".distance .value", row).html((route.distance/1000).toFixed(0));

            $(".title_container a", row).attr("href", "/routes/"+route.id);
            $(".title_container a", row).html(route.name);
            $(".title_container .route_location", row).html(route.start_address + " to " +route.end_address);

            $(".preview_map a img", row).preview();

            routes_container.append(row);
        }
    }

    jqwindow.scroll(function(event){
        var pixel = jqwindow.height() + jqwindow.scrollTop();
        if (lazyloading.css('visibility') != 'visible' &&  pixel >= lazyloading.offset().top){
            lazyloading.css('visibility', 'visible');
            window.console && console.log("start routes loading...");

            $.ajax({
                type:"POST",
                url:"/apis/rest/",
                data: { method:"get_all_routes",
                        pagesize: 16,
                        start_cursor: $("#cursor").val()},
                success: function(data){
                    data = _US(data);
                    lazyloading.css('visibility', 'hidden');
                    if (data.status=="ok") {
                        var routes = data.routes;
                        window.console && console.log("routes "+routes.length)
                        $("#cursor").val(data.end_cursor);
                        if(routes.length == 0){
                            lazyloading.css('visibility', 'visible');
                            $("#load_more").hide();
                        }
                        buildRoutes(routes);
                    }  else{
                        alert(data.message);
                    }
                },
                error:function(xhr, msg){
                    alert(msg);
                    lazyloading.css('visibility', 'hidden');
                },
                complete:function(){
                    routes_loading.fadeOut(2000);
                }
            });
            routes_loading.fadeIn(2000);
        }
    });
    $("#load_more").click(function(){
        jqwindow.trigger("scroll");
    });
});
</script>
{% endblock %}

{% block menu %}
{% include 'menu_routes.html' %}
{% endblock %}

{% block main-page %}
<div id="allroutes">
    <div id="info_and_search">
        <span>All Routes</span>
    </div>
    <div id="routes_container">
        {% for route in routes %}
        <div class="route_row {%if forloop.counter0|divisibleby:2 %}alt{%endif%}" >
            <div class="preview_map">
                <a href="/routes/{{route.id}}"><img class="preview_img" src="{{ route.preview_url|safe }}" title="{{ route.name }}"/></a>
            </div>
            <div class="distance">
                <span class="value">{{ route.distance|divide:"1000"|_u|floatformat:"0" }}</span>
                <span class="unit">{{ unit.km_mile }}</span>
            </div>
            <div class="title_container">
                <span><a href="/routes/{{route.id}}">{{ route.name }}</a></span>
                <span class="route_location">{{ route.start_address }} to {{ route.end_address }}</span>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="clear"></div>
    <div id="div_load_more"><a id="load_more" href="javascript:;">{% _ "More Routes..." %}</a></div>
    <div id="routes_loading"><img src="/static/images/routes_loading.gif" alt="route loadig..."/></div>
    <div id="lazy_loading"></div>
    <input id="cursor" type="hidden" value="{{ cursor }}"/>
</div>
{% endblock %}
